<style type="text/less">
  @import "/web/public/public.less";
  #left-nav.course{
    .btn{
      width: 110px;
      background: #054d8b;
      font-size: 24px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 40px;
      letter-spacing: 2px;
      color: #ffffff;
      text-align: center;
      border-radius: 10px;
      cursor: pointer;
    }
    .nav{
      .nav_list{
        margin-top: 30px;
        position: relative;
        .nav_wrap{
          text-align: right;
          .nav_title{
            display: inline-block;
          }
        }
        .nav_title{
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 24px;
          letter-spacing: 1px;
          color: #333333;
          display:block;
          text-align: right;
          &:hover{
            color: #e60012;
          }
        }
        .nav_sub{
          margin-top: 14px;
          a{
            height: 16px;
            overflow: hidden;
            display: block;
            text-align: right;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #7f7f7f;
            &:hover{
              color: #e60012;
            }
          }
          a:nth-child(2){
            padding-top: 18px;

          }
        }
        .nav_pop{
          position: absolute;
          left: 110px;
          top: -40px;
          overflow: hidden;
          width: 296px;
          display: none;
          z-index: 999;
          #triangle-left {
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-right: 20px solid #ffffff;
            border-bottom: 10px solid transparent;
            display:inline-block;
            vertical-align: middle;
            filter:drop-shadow(0px 1px 1px #dbdbdb)
          }
          .pop_center{
            width: 270px;
            background: #ffffff;
            display:inline-block;
            box-shadow:#dbdbdb -1px 1px 1px;
            vertical-align: middle;
            margin-left: -1px;
            padding: 14px 0;
            a{
              display: inline-block;
              width: 105px;
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 36px;
              letter-spacing: 1px;
              color: #7f7f7f;
              padding-left: 20px;
              &:hover{
                color: #e60012;
              }
            }
          }
        }
      }
    }
  }
</style>
<script src="/web/lib/less.min.js"></script>
<div id="left-nav" class="course">
  <div class="btn">实务</div>
  <ul class="nav">
    <li class="nav_list">
      <a href="${"${domain}/web/practiceList/1.html?id=103010301,103010302&column=文件采购"}" target="_blank" class="nav_title">文件采购</a>
      <div class="nav_sub">
        <a href="${"${domain}/web/practiceList/1.html?id=103010301&column=采购范本"}" target="_blank">采购范本</a>
        <a href="${"${domain}/web/practiceList/1.html?id=103010302&column=需求标准"}" target="_blank">需求标准</a>
      </div>
    </li>
    <li class="nav_list">
      <a href="${"${domain}/web/practiceList/1.html?id=103010303&column=实务流程"}" target="_blank" class="nav_title">实务流程</a>
      <div class="nav_sub"></div>
      <div class="nav_pop">
        <div id="triangle-left"></div>
        <div class="pop_center">
          <a href="${"${domain}/web/tagList/1.html?id=206,207,208,209,210,211"}" target="_blank">采购预算</a>
          <a href="${"${domain}/web/tagList/1.html?id=212,213,214,215,216"}" target="_blank">采购计划</a>
          <a href="${"${domain}/web/tagList/1.html?id=217,218,219,220,221"}" target="_blank">采购需求</a>
          <a href="${"${domain}/web/tagList/1.html?id=222,223,224,225"}" target="_blank">采购文件编制</a>
          <a href="${"${domain}/web/tagList/1.html?id=226,227,228,229,230,231"}" target="_blank">澄清更正</a>
          <a href="${"${domain}/web/tagList/1.html?id=255,256,257,258,176"}" target="_blank">开标</a>
          <a href="${"${domain}/web/tagList/1.html?id=259,260,261,262,263"}" target="_blank">资格预审</a>
          <a href="${"${domain}/web/tagList/1.html?id=264,265,266,267,268"}" target="_blank">评标</a>
          <a href="${"${domain}/web/tagList/1.html?id=269,270,271,272"}" target="_blank">采购方式变更</a>
          <a href="${"${domain}/web/tagList/1.html?id=273,274,275,276,277"}" target="_blank">重新采购</a>
          <a href="${"${domain}/web/tagList/1.html?id=278,279,280,281"}" target="_blank">现场勘查</a>
          <a href="${"${domain}/web/tagList/1.html?id=282,283,284,285"}" target="_blank">定标</a>
          <a href="${"${domain}/web/tagList/1.html?id=286,287,288,289,290,291"}" target="_blank">质疑投诉</a>
          <a href="${"${domain}/web/tagList/1.html?id=292,293,294,295"}" target="_blank">履约验收</a>
        </div>
      </div>
    </li>
    <li class="nav_list">
      <a href="${"${domain}/web/practiceList/1.html?id=103010304&column=内控管理"}" target="_blank" class="nav_title">内控管理</a>
      <div class="nav_sub"></div>
    </li>
    <li class="nav_list">
      <a href="${"${domain}/web/practiceList/1.html?id=103010102&column=精品项目"}" target="_blank" class="nav_title">精品项目</a>
      <div class="nav_sub"></div>
    </li>
    <li class="nav_list">
      <a href="${"${domain}/web/practiceList/1.html?id=103010101&column=案例点评"}" target="_blank" class="nav_title">案例点评</a>
      <div class="nav_sub"></div>
    </li>
    <li class="nav_list">
      <a href="${"${domain}/web/practiceList/1.html?id=103010305,103010306&column=采购代理"}" target="_blank" class="nav_title">采购代理</a>
      <div class="nav_sub">
        <a href="${"${domain}/web/practiceList/1.html?id=103010305&column=采购/交易中心"}" target="_blank">采购/交易中心</a>
        <a href="${"${domain}/web/practiceList/1.html?id=103010306&column=社会中介"}" target="_blank">社会中介</a>
      </div>
    </li>
  </ul>
</div>
<script>
  setTimeout(function() {
    console.log($('.pop_center').height());

    $('.nav_list').hover(function () {
      $(this).children('.nav_pop').css('display', 'inline-block');
      $('.nav_pop').css('top', + -($(this).find('.pop_center').height() / 2 - 10) + 'px');
    }, function () {
      $(this).children('.nav_pop').css('display', 'none');
    })
  })

</script>